Summary

Adds an arc transition option that makes elements travel along a curved Bézier path rather than a straight line.

Works with motion components, useAnimate, and layout animations via layoutId:

// Keyframe animation
<motion.div
    animate={{ x: 200, y: 100 }}
    transition={{
        arc: {
            amplitude: 1,      // how far the arc bulges (fraction of travel distance)
            peak: 0.5,         // where along the path the arc peaks (0–1, default 0.5)
            direction: "cw",   // "cw" | "ccw" | auto
            orientToPath: 0.5, //  rotates the element to follow the tangent of the arc path (boolean | number)
        },
    }}
/>

// Layout animation
<motion.span
    layoutId="indicator"
    transition={{
        layout: {
            arc: { amplitude: 1 },
        },
    }}
/>

// useAnimate
animate(el, { x: 200, y: 100 }, { arc: { amplitude: 1 } })

• amplitude — how pronounced the arc is, as a fraction of total travel distance
• peak — where along the path the arc reaches maximum height (default 0.5 = symmetric)
• direction — "cw" / "ccw" to fix which side the arc bulges toward; when unset, auto-picks a consistent screen-space direction regardless of travel direction
• orientToPath — rotates the element to follow the tangent of the arc path. higher number = more intensity

Opinionated choices:

• Arc only applies to x/y motion — other animating properties (e.g. scale) are unaffected
• Interrupted layout animations continue arcing to the same side as the interrupted animation

Test plan

• useAnimate example toggles between positions along an arc
• Keyframe examples show ghost (straight) vs arc element side-by-side for x, y, diagonal, and diagonal+scale
• Toggle layoutId element between positions — should travel in a curve, not a straight line
• Adjust amplitude slider — 0 = straight line, 1 = arc equal to travel distance
• Adjust peak — arc should shift earlier/later along the path
• Set direction — arc should lock to cw or ccw regardless of movement direction
• Interrupt a layout animation mid-arc — new arc should continue bulging to the same side
• Test horizontal, vertical, and diagonal layout animation cases